<template>
  <div class="main">
    <div class="inner" v-for="(item, index) in dataList.data" :key="index">
      <div class="inner-left">
        <img class="big-avator" :src="item.author.avatar_url" alt="" />
        <p class="readNum">
          <span>{{ item.reply_count }}</span
          >/<span>{{ item.visit_count }}</span>
        </p>
        <div class="inner-middle">
          <div :class="['desc', index <= 2 ? ' top' : '']">
            {{ item.tab }}
          </div>
          <p class="inner-title" @click="goDetails(item)">{{ item.title }}</p>
        </div>
      </div>
      <div class="inner-right">
        <img class="little-avator" :src="item.author.avatar_url" alt="" />
        <span class="timer">{{ item.last_reply_at }}</span>
      </div>
    </div>
  </div>
</template>

<script>
//数据列表模块
import { handleDataList } from '@/modules/cnode/handleDataList'
export default {
  data() {
    return {
      val: [],
    }
  },
  components: {},
  props: {
    datas: {
      type: Array,
      default: () => [],
    },
  },
  setup(props, { emit }) {
    //查看详情 数据列表 刷新数据
    const { goDetails, getDataList, dataList } = handleDataList()
    return {
      dataList,
      goDetails,
      getDataList,
    }
  },
}
</script>

<style lang="scss" scope>
@import '@/global.scss';
.main {
  width: 100%;
  height: 100%;
  .inner {
    color: #333;
    @extend .displayBetween;
    border-bottom: 1px solid #999;
    box-sizing: border-box;
    padding: 0 10px;
    .inner-left {
      @extend .displayAround;
      .readNum {
        width: 80px;
        margin: 0 30px;
        &:nth-child(1) {
          font-size: 14px;
          color: #000;
        }
        &:nth-child(2) {
          font-size: 16px;
          color: #555;
        }
      }
      .inner-middle {
        @extend .disPlaybox;
        .desc {
          width: 40px;
          height: 20px;
          padding: 2px 5px;
          font-size: 14px;
          text-align: center;
          line-height: 20px;
          border-radius: 3px;
          border: 1px solid #ccc;
          color: #333;
          margin-right: 8px;
        }
        & .top {
          background: skyblue;
          color: #ffff;
          border: none;
        }
        .inner-title {
          text-align: left;
        }
      }
    }
    .inner-right {
      @extend .displayAround;
    }
    .big-avator {
      width: 30px;
      height: 30px;
      text-align: left;
    }
    .little-avator {
      width: 26px;
      height: 26px;
    }
    .timer {
      font-size: 12px;
      color: gray;
      margin-left: 8px;
    }
  }
}
</style>